<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
<style>
  .warp{
    width: 500px;
    margin: 0 auto;
  }
  .middle{
    text-align: center;
  }
.SR{
  width: 500px;

}
.left{
  list-style: none;
  width: 200px;
  float: left;
}
.right{
  list-style: none;
  width: 200px;
  float: right;
}
img{
  width: 200px;
  height: 200px;
}
</style>
  <body>
   
    <script>
      let vDom = {
          // 标签名称
          tagName: "div",
          // 属性
          props: {
              id: "box",
              class: "warp",
              "data-abc": "abced"
          },
          // 子节点
          children: [
              {
                  tagName: "h1",
                  props: {
                      class:"middle"
                  },
                  children: ["百度"]
              },
              {
               tagName:"input",
               props:{
                class:"SR",
                // style: {
                //           color: "orange",
                //           margin:"0 auto"
                //       }

                },
                children: [""]
              },
              {
               tagName:"ul",
               props:{
                  class:'left',
                  // style: {
                  //         color: "orange",
                  //         margin:"0 auto"
                  //     }
                },
                children: [
                    "我的关注",
                    {
                      tagName:"li",
                      props:{

                      },
                      children:[
                          "左百度内容1",
                          {
                            tagName:"img",
                            props:{
                                src:"./logo.png"
                            },
                            children:["百度内容1"]
                         },
                      ]
                    },
                    {
                      tagName:"li",
                      props:{

                      },
                      children:["左百度内容2"]
                    },

                ]
              },
              {
               tagName:"ul",
               props:{
                  class:'right',
                  // style: {
                  //         color: "orange",
                  //         margin:"0 auto"
                  //     }
                },
                children: [
                     "百度热搜",
                    {
                      tagName:"li",
                      props:{

                      },
                      children:["百度内容1"]
                    },
                    {
                      tagName:"li",
                      props:{

                      },
                      children:["百度内容2"]
                    },

                ]
              },

          ]
      }

      // 1. 函数的功能       (把虚拟dom转换成真实dom)
      // 2. 函数的参数
      // 3. 函数的返回值
      // 4. this

      const vDomToRdom = (vDom) => {
          // 解构赋值
          const { tagName, props, style,children } = vDom
          // 1. 根据tagName生成对应的标签
          const realDom = document.createElement(tagName)
          // 2. 给真实dom添加属性
          // Object.keys  把对象中的key存放到一个数组
          Object.keys(props).forEach((item) => {
            console.log(item);
            console.log(props[item]);
            // Object.keys(props[item]).forEach((i) =>{
            //         realDom.setAttribute(i, style[i])
            //     })
              // 添加不了自定义属性
              // realDom[item] = props[item]
              realDom.setAttribute(item, props[item])
              // realDom.setAttribute("item", "props[item]")
          })
          // 3. 添加子节点
          children.forEach(item => {
            console.log(item);
              // 如果是文本节点
              if (typeof item === "string") {
                  // 创建文本节点
                  const text = document.createTextNode(item)
                  realDom.appendChild(text)
              } else {
                  // 虚拟dom
                  // 递归调用
                  const real = vDomToRdom(item)
                  realDom.appendChild(real)
              }
          })
          return realDom
      }

      document.body.appendChild(vDomToRdom(vDom))
    </script>
  </body>
</html>
